<div class="page-title clearfix">
  <div class="title">系统设置</div>
</div>

<div class="page-msg m-15">
  <h3 class="color-red strong">功能描述</h3>
  <ul>
    <li *ngFor="let item of msgTip.setting" class="color-red strong">{{item}}</li>
  </ul>
</div>

<div class="panel">
  <nz-table #nzTable
            [nzData]="listData.voList"
            [nzLoading]="_loading"
            [nzFrontPagination]="false"
            [nzShowTotal]="totalRow"
            [nzPageSize]="listData.pageSize"
            [nzTotal]="listData.totalRow"
            [nzPageIndex]="listData.curPage"
            (nzPageIndexChange)="getList($event)">
    <thead nz-thead>
    <ng-template #totalRow>共 {{listData.totalRow}} 条数据</ng-template>
    <tr>
      <th nz-th class="text-center" nzWidth="5%"><span>序号</span></th>
      <th nz-th class="text-center" nzWidth="25%"><span>Key</span></th>
      <th nz-th class="text-center" nzWidth="25%"><span>值</span></th>
      <th nz-th class="text-center" nzWidth="35%"><span>备注</span></th>
      <th nz-th class="text-center" nzWidth="10%"><span>操作</span></th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
      <tr nz-tbody-tr *ngIf="data.k !== appDataKey">
        <td nz-td class="text-center">{{i+1}}</td>
        <td nz-td class="text-center">{{editCache[data.id].data.k}}</td>
        <td nz-td class="text-center">
          <ng-container *ngIf="!editCache[data.id].edit">
            {{editCache[data.id].data.v}}
          </ng-container>
          <ng-container *ngIf="editCache[data.id].edit">
            <input type="text" nz-input [ngModelOptions]="{standalone: true}"
                   [(ngModel)]="editCache[data.id].data.v" required
                   placeholder='请输入key' title='key'>
          </ng-container>
        </td>
        <td nz-td class="text-center">
          <ng-container *ngIf="!editCache[data.id].edit">
            {{editCache[data.id].data.summary}}
          </ng-container>
          <ng-container *ngIf="editCache[data.id].edit">
            <textarea type="text" nz-input [ngModelOptions]="{standalone: true}"
                      [(ngModel)]="editCache[data.id].data.summary" required
                      placeholder='请输入值' title='值'>
            </textarea>
          </ng-container>
        </td>
        <td nz-td class="text-center">
          <ng-container *ngIf="!editCache[data.id].edit">
            <button nz-button title='修改' class="btn-blue-o" (click)="startEdit(data.id)">
              <i class="anticon anticon-edit"></i>
            </button>
          </ng-container>
          <ng-container *ngIf="editCache[data.id].edit">
            <button nz-popconfirm nz-button title='确定' class="btn-green-o mr" nzTitle='确认修改吗？' (nzOnConfirm)="saveEdit(data.id)">
              <i class="anticon anticon-check"></i>
            </button>
            <button nz-popconfirm nz-button title='取消' nzTitle='确认取消吗？' (nzOnConfirm)="cancelEdit(data.id)"
                    class="btn-warning-o">
              <i class="anticon anticon-close"></i>
            </button>
          </ng-container>
        </td>
      </tr>
    </ng-template>
    </tbody>
  </nz-table>
</div>
